<style>
  .btn{
    color: #00aaee;
    cursor: pointer;
  }
</style>
<template>
  <main>
    <div class="tile is-parent is-4" style="height: 200px">
      <article class="tile is-child">
        <div class="block">
          <p class="title is-5">类目添加</p>
        </div>
        <div class="block">
          <div class="control is-horizontal">
            <div class="control-label">
              <label class="label">名称</label>
            </div>
            <div class="control">
              <div class="control is-fullwidth">
                <input class="input" v-model="param.name" type="text">
              </div>
            </div>
          </div>
          <div class="control is-horizontal">
            <div class="control-label">
              <label class="label">类型</label>
            </div>
            <div class="control">
              <div class="select is-fullwidth">
                <select v-model="param.type">
                  <option value="index">首页</option>
                  <option value="list">列表</option>
                  <option value="detail">详情</option>
                </select>
              </div>
            </div>
          </div>
          <div class="control is-horizontal">
            <div class="control-label">
              <label class="label"></label>
            </div>
            <div class="control">
              <button class="button is-primary" @click="add">添加</button>
            </div>
          </div>
        </div>
      </article>
    </div>

  </main>
</template>

<script>
  export default {
    data () {
      return {
        list:[
          {name:'Karyn Holmberg',type:'Drums'},
        ],
        param:{name:'Karyn Holmberg',type:'Drums'},
      }
    },
    methods: {
      add () {
        let vm = this
        let arr = {
          name:vm.param.name,
          type:vm.param.type
        }
        vm.list.push(arr)
      },
      modify (name,type) {
        this.$router.push({path:'/tpl',query:{type:type,name:name}})
      },
      deletes (i) {
        let vm = this
        vm.list.splice(i,1)
      }
    },
    computed: Object.assign({}),
    components: {},
    mounted () {
      this.$nextTick(function () {
      })
    }
  }
</script>
